<template>
    <div style="width: 100%; height: 100%;">
        <el-dialog
            :visible.sync="dialogFormVisible"
            class="show"
            width="640px"
            height="600px"
            >
            <div class="login-wrapper">
                <h3>微信一键登录注册</h3>
                <ul class="lc-list">
                    <li>
                        <span>1</span>
                        <span>打开微信扫码</span>
                    </li>
                    <li class="lc-list2">
                        <span>2</span>
                        <span>关注Bzuo公众号</span>
                    </li>
                    <li class="lc-list2">
                        <span>3</span>
                        <span>登录注册成功</span>
                    </li>
                </ul>

                <div style="margin: 40px 0;">
                    <vue-qr v-if="active == 1" class="vue-qr" :text="wxLogin" :logoScale="50" :size="260"></vue-qr>
                </div>

                <div class="css-gtzlfc">或</div>
                <div>
                    <!-- <button class="qq-login-btn">
                        <img src="@/assets/login/QQ.png" alt="">
                        <span>QQ登录注册</span>
                    </button> -->
                    <button class="qq-login-btn" @click="showPassLogin = true">
                        <img src="@/assets/login/passLogin.png" alt="">
                        <span>密码登录</span>
                    </button>
                    <button class="phone-login-btn" @click="showPhoneLogin = true">
                        <img src="@/assets/login/phone.png" alt="">
                        <span>手机登录注册</span>
                    </button>
                </div>

                <div class="other-login-wrapper">
                    <span>登录即代表您已同意<label>服务协议</label>&<label>隐私政策</label></span>
                    <!-- <el-dropdown>
                        <span class="el-dropdown-link">
                            其他登录方式<i class="el-icon-arrow-down el-icon--right"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>黄金糕</el-dropdown-item>
                            <el-dropdown-item>狮子头</el-dropdown-item>
                            <el-dropdown-item>螺蛳粉</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown> -->
                </div>
            </div>
        </el-dialog>
        <el-dialog
            :visible.sync="showPhoneLogin"
            class="show"
            width="490px"
            >
            <div class="phone-login-wrapper">
                <ul>
                    <li>
                        <h3>手机登录注册</h3>
                    </li>
                    <li>
                        <el-input  v-model="phone" placeholder="请输入手机号"></el-input>
                    </li>
                    <li class="yzm">
                        <el-input  v-model="yzm"  placeholder="请输入验证码">
                        </el-input>
                        <span @click="getYzm" :class="{'notAllowed': !obtainYzm}">{{yzmText}}</span>
                    </li>
                    <li>
                        <span class="login-btn" @click="gotoLogin(1)">登录/注册</span>
                    </li>
                </ul>
            </div>
        </el-dialog>
        <el-dialog
            :visible.sync="showPassLogin"
            class="show"
            width="490px"
            >
            <div class="phone-login-wrapper">
                <span class="wraing-text" v-if="ifWraing">{{wraing}}</span>
                <ul>
                    <li>
                        <h3>密码登录</h3>
                    </li>
                    <li>
                        <el-input  v-model="phone" placeholder="请输入手机号或邮箱号"></el-input>
                    </li>
                    <li class="yzm">
                        <el-input  v-model="password"  placeholder="请输入密码">
                        </el-input>
                    </li>

                    <li>
                        <span class="login-btn" @click="gotoLogin(2)">登录</span>
                    </li>
                </ul>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import $http from "@/api/login/login"
import axios from 'axios'
import VueQr from 'vue-qr'
export default {
    data() {
        return {
            active: 0,
            wxLogin: '',
            ifWraing: false,
            showPassLogin: false,
            dialogFormVisible: false,
            showPhoneLogin: false,
            phone: '',
            yzm: '',
            password: '',
            yzmText: '获取验证码',
            obtainYzm: true,
            wraing: '',
            index: ''
        }
    },
    components: {
        VueQr
    },
    mounted() {
        window.initLoginDialog = this.initLoginDialog;
    },
    methods: {
        /**
         * 微信扫码登录
         */
        wxLoginGetQrCode() {
            $http.wxLoginGetQrCode().then(res => {
                console.log('微信扫码登录',res);
                this.ticket = res.ticket;
                this.active = 1;
                this.wxLogin = res.url;
                let data = {
                    ticket: res.ticket
                };
                this.index = setInterval(() => {
                    this.wxLoginCheck(data);
                }, 2000)
            })
        },
        /**
         * 微信登录后获取信息
         */
        wxLoginCheck(data) {
            $http.wxLoginCheck(data).then((res) => {
                console.log('微信登录后获取信息',res);
            })
        },
        /**
         * 显示隐藏弹框
         */
        initLoginDialog(data) {
            this.dialogFormVisible = data;
            this.wxLoginGetQrCode();
        },
        /**
         * 密码登录
         */

        /**
         * 获取验证码
         */
        getYzm() {
            let that = this;
            if(!this.obtainYzm) {
                return;
            }
            if(!this.phone || this.phone.length !== 11) {
                this.$message('请填写正确的手机号！')
                return;
            }
            let data = {
                phone: this.phone
            };
            $http.getYzm(data).then((res) => {
                console.log(res);
                that.obtainYzm = false;
                that.countDownFun();
            })
        },
        /**
         * 验证码接口完成，开始倒计时
         */
        countDownFun() {
            this.yzmText = "60s后在获取";
            let num = 60;
            let index = setInterval(() => {
                num = num - 1;
                this.yzmText = num + "s后在获取";
                if(num == 0) {
                    this.yzmText = '获取验证码';
                    this.obtainYzm = true;
                    window.clearInterval(index);

                }
            }, 1000)
        },
        /**
         * 短信登录
         */
        gotoLogin(type) {
            let that = this;
            let data = {
                username: this.phone,
                //code: this.yzm,
                rememberMe: "true",
                type: type

            };
            if(type == 1) {
                data.code = this.yzm;
            } else {
                data.password = this.password;
            }
            $http.gotoLogin(data).then((res) => {
              console.log(res);
                if(res.code == 0) {
                    that.$message({
                        message: '登录成功',
                        type: 'success'
                    });
                    debugger;
                    that.getUserInfo(res.data.userId);
                } else if(res.code !== 0) {
                    that.ifWraing = true;
                    that.wraing = res.msg;
                    setTimeout(() => {
                        that.ifWraing = false;
                    }, 3000)
                }

            })
        },
        /**
         * 获取用户信息
         */
        getUserInfo(userId) {
            let that = this;
            let data = {
                phone: userId
            }
            $http.getUserInfo(data).then((res) => {
                console.log("获取用户信息",res);
                sessionStorage.setItem("user", JSON.stringify(res.data));
                sessionStorage.setItem("userId", res.data.sysUser.userId);
                that.dialogFormVisible = false;
                that.$router.go(0);
            })
        }
    }
}
</script>
<style scoped>
    .wraing-text {
        position: absolute;
        left: 0;
        top: 10px;
        width: 100%;
        text-align: center;
        color: red;
    }
    .show >>> .el-dropdown-menu {
        top: -100px;
    }
    .show >>> .el-dropdown {
        float: right;
    }
    .show >>> .el-dialog__header {
        display: none;
    }
    .show >>>  .el-dialog__body {
        padding: 0 !important;
    }
    .other-login-wrapper {
        width: 640px;
        height: 40px;
        line-height: 40px;
        background-color: #f0f0f0;
        position: absolute;
        bottom: 0;
        right: 0;
        text-align: left;
        padding: 0 10px;
    }
    .show button {
        cursor: pointer;
        background: rgb(239, 242, 244);
        border-radius: 4px;
        color: rgb(85, 85, 85);
        border: 0;
        padding: 10px 15px;
        margin: 0 20px;
    }

    .show button:hover {
        background: #7cefdc;
    }

    .show button img {
        vertical-align: middle;
        width: 25px;
        margin-right: 5px;
    }
    .show button span {
        display: inline-block;
        vertical-align: middle;
    }
    .lc-list li {
        display: inline-block;
        position: relative;
    }

    .lc-list li span:first-child {
        display: inline-block;
        width: 24px;
        height: 24px;
        text-align: center;
        line-height: 20px;
        color: #fff;
        background-color: rgb(2, 212, 177);
        border-radius: 20px;
        margin: 0 5px;
    }

    .lc-list2 {
        margin-left: 90px;
    }

    .lc-list2::before {
        content: "";
        display: block;
        position: absolute;
        width: 52px;
        height: 1px;
        background: rgb(240, 240, 240);
        top: 50%;
        right: calc(100% + 16px);
    }

    .css-gtzlfc {
        display: flex;
        -webkit-box-align: center;
        align-items: center;
        color: rgb(153, 153, 153);
        margin: 0 0 25px 25px;
    }

    .css-gtzlfc::before {
        content: "";
        display: block;
        width: 248px;
        height: 1px;
        background: rgb(240, 240, 240);
        margin-right: 24px;
    }
    .css-gtzlfc::after {
        content: "";
        display: block;
        width: 248px;
        height: 1px;
        background: rgb(240, 240, 240);
        margin-left: 24px;
    }
    .login-wrapper {
        height: 600px;
        width: 600px;
        display: inline-block;
        vertical-align: top;
        text-align: center;
    }
    .login-wrapper h3 {
        text-align: center;
        margin: 20px 0;
        font-size: 27px;
        letter-spacing: 2px;
        font-weight: 600;
        color: #333;
    }
    .login-img-wrapper {
        display: inline-block;
        width: 360px;
        height: 600px;
        background-color: #f0f0f0;
        display: inline-block;
    }
    .phone-login-wrapper {
        padding: 20px;
    }
    .phone-login-wrapper li {
        margin: 30px 0;
        text-align: center;
    }
    .phone-login-wrapper >>> .el-input__inner {
        height: 50px;
        line-height: 50px;
        width: 410px;
    }
    .phone-login-wrapper >>> .el-input-group__append, .el-input-group__prepend {
        color: #9fdbed;
        background-color: #fff;
    }
    .phone-login-wrapper h3 {
        font-size: 26px;
        letter-spacing: 2px;
        font-weight: 500;
    }
    .yzm {
        position: relative;
    }
    .yzm span {
        position: absolute;
        right: 25px;
        top: 0;
        padding: 16px 10px;
        cursor: pointer;
        color: #8eb9e7;
    }
    .yzm .notAllowed {
        cursor: not-allowed;
    }
    .login-btn {
        display: inline-block;
        width: 410px;
        height: 50px;
        line-height: 50px;
        border-radius: 5px;
        background-color: #5daafb;
        color: #fff;
        cursor: pointer;
        font-size: 18px;
        letter-spacing: 2px;
    }
    .login-btn:hover {
        background-color: #4480bf;
    }


</style>
